<template>
  <div>
    <div v-for="item in pagingData " :key="item.id">{{ item.text }}</div>
    <el-pagination :current-page.sync="queryInfo.current" :page-size="queryInfo.size" :page-sizes="[10, 20, 30, 40]" layout="total, prev, pager, next, jumper,sizes" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
  </div>
</template>
  
<script>
import { getPaging } from '@/api/codeExamples'
export default {
  name: 'aa',
  data() {
    return {
      queryInfo: {
        current: 1,
        size: 10,
      },
      total: 0,
      pagingData: {},
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getPaging(this.queryInfo)
      console.log(res)
      this.pagingData = res.data.pagingData
      this.total = res.data.total
    },
    handleCurrentChange() {
      this.getList()
    },
    handleSizeChange(val) {
      this.queryInfo.size = val
      this.getList()
    },
  },
}
</script>